<!DOCTYPE html>
<html class="x-admin-sm" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>修改公司企业信息</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <link rel="stylesheet" th:href="@{/layui/css/font.css}">
    <link rel="stylesheet" th:href="@{/layui/css/xadmin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/login.css}">
    <script charset="utf-8" th:src="@{/layui/lib/layui/layui.js}" type="text/javascript"></script>
    <script th:src="@{/layui/js/xadmin.js}" type="text/javascript"></script>
</head>
<body class="login-bg">
<div class="layui-fluid">
    <div class="layui-row" style="width: 1100px;margin: 20px auto auto">
        <form class="layui-form" enctype="multipart/form-data" id="fm" style="height: 440px;padding: 30px 20px;background: white;border-radius: 20px">
            <div style="display: none">
                <label>
                    <input name="id" th:value="${company.id}">
                </label>
            </div>
            <div style="float: left;margin: 70px auto auto 50px">
                <div class="layui-form-item">
                    <div class="layui-upload">
                        <div class="layui-upload-list">
                            <img alt="这是公司的头像" class="layui-upload-img"
                                 id="portrait" src="" style="width: 200px;height: 200px" th:src="${company.portrait}">
                            <p id="portraitText" style="margin-top: 15px"></p>
                        </div>
                        <button class="layui-btn" id="portrait_btn" name="portrait_btn" style="width: 100%" type="button">上传个人头像</button>
                        <input id="img_url" name="portrait" th:value="${company.portrait}" type="hidden"/>
                        <hr>
                        <button class="layui-btn" id="L_repass" lay-filter="edit" lay-submit
                                style="width: 100%" type="submit">修改信息</button>
                    </div>
                </div>
            </div>
            <div style="float: left;margin: 100px auto auto 30px;width: 380px;">
                <div class="layui-form-item">
                    <label class="layui-form-label" for="companyName">
                        <span class="x-red">*</span>公司名称&emsp;
                    </label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="companyName" lay-verify="required" name="companyName" th:value="${company.companyName}" type="text">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="cityName">所在地区&emsp;</label>
                    <div class="layui-input-inline">
                        <select id="cityName" lay-verify="required" name="city.id">
                            <option th:value="${company.city.id}">[[${company.city.cityName}]]</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="industryName">所属行业&emsp;</label>
                    <div class="layui-input-inline">
                        <select id="industryName" lay-verify="required" name="industry.id">
                            <option th:value="${company.industry.id}">[[${company.industry.industryName}]]</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="phone">联系方式&emsp;</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="phone" name="phone" th:value="${company.phone}" type="text">
                    </div>
                </div>
            </div>

            <div style="float:left;margin: 70px auto auto 10px;width: 380px;">

                <div class="layui-form-item">
                    <label class="layui-form-label" for="introduction">公司描述&emsp;</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="introduction" name="introduction" th:value="${company.introduction}" type="text">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="hrName">HR姓名&emsp;</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="hrName" name="hrName" th:value="${company.hrName}" type="text">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="hrPhone">HR联系方式&emsp;</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="hrPhone" name="hrPhone" th:value="${company.hrPhone}" type="text">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="password">密&emsp;&emsp;码&emsp;</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="password" name="password" required th:value="${company.password}" type="password">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label" for="re_password">确认密码&emsp;</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="re_password" lay-verify="re_password" name="re_password" required type="password">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    layui.use([ 'form', 'layer', 'laydate', 'jquery', 'upload' ], function() {
        const form = layui.form, layer = layui.layer, upload = layui.upload,
            $ = layui.jquery;
        // 获取下拉框信息 (行业信息)
        $.get("/industry_option_message",{},function (data) {
            let list = data;
            const select = document.getElementById('industryName');
            if (list != null) {
                for (let c in list) {
                    let option = document.createElement("option");
                    option.setAttribute("value", list[c].id);
                    option.innerText = list[c].industryName;
                    select.appendChild(option)
                }
            }
            form.render('select');
        },"json");
        // 获取下拉框信息 (市级信息)
        $.get("/city_option_message",{},function (data) {
            let list = data;
            const select = document.getElementById('cityName');
            if (list != null) {
                for (let c in list) {
                    let option = document.createElement("option");
                    option.setAttribute("value", list[c].id);
                    option.innerText = list[c].cityName;
                    select.appendChild(option)
                }
            }
            form.render('select');
        },"json");
        //表单验证
        form.verify({
            re_password : function () {
                if ($('#password').val() !== $('#re_password').val()) {
                    return "两次密码输入不一致!";
                }
            }
        })
        /*上传图片*/
        const uploadInst = upload.render({
            elem: '#portrait_btn',
            url: '/upload_images',
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#portrait').attr('src', result); //图片链接（base64）
                });
            },
            done: function (res) {
                //如果上传失败
                if (res.status > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                console.log(res.code)
                if (res.code === 0) {
                    $('#img_url').attr("value",res.src)
                }
            },
            error: function () {
                //演示失败状态，并实现重传
                const portraitText = $('#portraitText');
                layer.msg('上传失败');
                portraitText.html('<div><a style="display: block;margin: auto" class="layui-btn layui-btn-xs demo-reload">重试</a></div>');
                portraitText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        //监听提交
        form.on('submit(edit)', function(data) {
            $.ajax({
                url : "/admin_user_company_message_save_or_edit",
                method : 'post',
                data : data.field,
                dataType : 'JSON',
                success : function(res) {
                    if (res.code === 0) {
                        //弹出提示，并在1秒后进行跳转
                        layer.alert("修改成功", {
                            icon : 6
                        }, function() {
                            //关闭当前frame
                            xadmin.close();

                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                            return false;
                        });
                    } else {
                        layer.msg("修改失败:" + res.msg);
                        return false;
                    }
                }
            });
            return false;
        });
    })
</script>
</body>
</html>